<template>
<el-button class="mb20" @click="addOne" type="primary">新增</el-button>
		
	<!-- <el-form :inline="true" class="demo-form-inline">
		<el-form-item label="" style="margin-left: 15px;">
			<el-input v-model="keywords" placeholder="请输入搜索关键词"></el-input>
		</el-form-item>

		<el-form-item>
			<el-button @click="getData" type="primary">搜索</el-button>
		</el-form-item>
	</el-form> -->
	<el-table :data="tableData" border style="width: 100%">
		<el-table-column prop="goods_name" label="名称" />
        <el-table-column prop="goods_names" label="评分" />

		<el-table-column prop="categoryid" label="所属分类">
			<template #default="scope">

				{{classLists.find(t=>t.id==scope.row.categoryid)&&classLists.find(t=>t.id==scope.row.categoryid).name }}
			</template>
		</el-table-column>

		<el-table-column prop="categoryimg" label="列表图" width="100">
			<template #default="scope">
				<el-image style="width: 100px; height: 100px" :src="ifImgHeader(scope.row.categoryimg)"
					:preview-src-list="[ifImgHeader(scope.row.categoryimg)]">
				</el-image>
			</template>
		</el-table-column>
		
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="mini" @click="editOne(scope.row)">编辑</el-button>
				<el-button size="mini" type="danger" @click="removeModal(scope.row)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- <el-pagination class="mt20" v-model:currentPage="page" @current-change="getData" :page-size="pagesize" background
		layout="prev, pager, next" :total="total">
	</el-pagination> -->
	<el-dialog v-model="modalState" :title="title">
		<add-product v-if="modalState" ref="addProduct" @editimgsProps="editImgsProps" :form="form" :classList="classList"
			:colorList360="colorList360">
		</add-product>
		
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="modalState = false">取消</el-button>
				<el-button type="primary" @click="submit">确定</el-button>
			</span>
		</template>
	</el-dialog>
	
</template>

<script lang="ts">
	import {
		mounted,
		ref
	} from "vue";
	import addProduct from '../components/addProduct.vue'
	import carColor from '../components/carcolor.vue'
	import carShop from '../components/carShop.vue'
	import {
		ElMessageBox,
		ElMessage,
		ElLoading
	} from 'element-plus';
	export default {

		components: {
			'add-product': addProduct,
			"car-color": carColor,
			"car-shop": carShop
		},
		data() {
			return {
				pagesize: 8,
				classList: [],
				classLists: [],
				//360组件图
				colorList360: {
					name: '',
					colorimg: '',
					goodsimg: ""
				},
				//颜色图
				colorList: [{
					name: '',
					colorimg: '',
					goodsimg: ""
				}],
				//卖点
				carShopList: [{
					carldimg: "",
					carldtitle: "",
					carldtitles: ""
				}],
				carState: false,
				colorState: false,
				form: {
					zgcs: "", //最高车速
					yxrl: "", //油箱容量
					zxldjl: "", //最小离地间隙
					gkhy: "", //工程油耗
					goods_name: "", //名称
					goods_names: "", //车型简介
					categoryimgs: "", //车型导航img
					categoryimg: "", //车型img

					shop_price: "", //车型价格
					pricehz:"", //价格描述
					categoryid: "", //分类id	
					topimg: "", //产品详情顶图pc
					topimgm: "", //产品详情顶图移动
					carbigimg: "", //车型大图轮播
					videojs: "", //视频鉴赏
					videojsimg: "", //视缩略图
					videojstitlel: "", //视频鉴赏标题左	
					videojstitler: "", //视频鉴赏标题右
					carld: "", //车型亮点
					goodsimage: "", //颜色图
					
					wxcc: "", //外型尺寸
					jz: "", //离地间隙
					zg: "", //整车装备质量
					zj: "", //轴距
					lt: "", //发动机类型
					djgl: "", //最大扭矩
					kzqcs: "", //制动形式
					dccs: "", //最大功率
					zgcs:"",
					xhlc:'',
					is_on_sale: "1", //是否上架
				},
				title: "",
				tableData: [],
			}
		},
		computed: {
			getModalState() {
				return function(n) {
					return n == this.modalState
				}
			},
		},
		mounted() {
			this.getClassList();
			this.getData();
		},
		methods: {
			remove(data) {
				
				this.$http.post("/index.php/index/Goods/cpdel", {
					id: data.id
				}).then(data => {
					ElMessage({
						message: '删除成功',
						type: 'success',
					})
					this.getData();
				})
			},
			addOne() {
				
				this.add()
			},
			// 编辑
			editOne(data) {

				this.id = data.id;
				// 分类id
				let cdata = this.copyObj(data);


				this.form = cdata;
				console.log(this.form)
				this.modalState = true;
				

			},
			getData() {
				this.$http.post("/index.php/index/Goods/cplist", {
					page: this.page,
					pagesize: this.pagesize,
					keywords: this.keywords
				}).then(data => {
					//console.log(data)
					let arr=[]
					data.forEach(t=>{
						let {name,pinf,cid,img,images} = t
						
						let datas={goods_name:name,goods_names:pinf,categoryid:cid,categoryimg:img,carbigimg:images,...t,}
						arr.push(datas)
					})
					console.log(arr)
					this.tableData = arr;
					

				})
			},
			submit() {
				let addProductref = this.$refs.addProduct;
				this.id ? this.form.goodsfid = this.id : '';
				this.doRules(addProductref.$refs.rule).then(() => {



					let colorList = this.copyObj(this.colorList);
					colorList.forEach(t => {
						t.goodsimg = [t.goodsimg]
					})
					
					//大图轮播
					this.form.carbigimg = JSON.stringify(addProductref.carbigimg)
					//颜色图
					
					typeof(this.form.categoryid) == 'object' ? this.form.categoryid = this.form.categoryid[1]: '';
					console.log(this.form);
					let {goods_name, goods_names,categoryid,carbigimg,categoryimg}=this.form;
					this.$http.post(
						this.id ? '/index.php/index/Goods/cpedits' :
						"/index.php/index/Goods/cpadds", {...this.form,name:goods_name,pinf:goods_names,cid:categoryid,img:categoryimg,images:carbigimg}).then(() => {
						this.modalState = false;
						this.getData();
					})
				})
			},
			// 获取分类数据
			getClassList() {
				this.$http.post("/index.php/index/Goods/fllist").then(data => {
					this.classLists = data;
					let classList = data.filter(t => t.pid === 0);
					classList.forEach(t => {
						let arr = [];
						data.forEach(ts => {
							if (t.id == ts.pid) {
								arr.push(ts)
							}
						})
						t.children = arr;
					})
					this.classList = classList;
					console.log(classList)
				})
			},
			// 颜色图emit
			addColorList() {
				this.colorList.push({
					name: '',
					colorimg: '',
					goodsimg: ""
				})
			},
			handleColorimg({
				colorimg,
				index
			}) {
				this.colorList[index].colorimg = colorimg;
			},
			handleGoodsimg({
				goodsimg,
				index
			}) {
				this.colorList[index].goodsimg = goodsimg;
			},
			deleteColorList(index) {

				this.colorList.splice(index, 1)
			},
			// 卖点emit
			handleCarldimg({
				carldimg,
				index
			}) {
				this.carShopList[index].carldimg = carldimg;
			},

			deleteLists(index) {
				this.carShopList.splice(index, 1)
			},
			addCarShopList() {
				this.carShopList.push({
					carldimg: "",
					carldtitle: "",
					carldtitles: ""
				})
			},


		}
	}
</script>
<style type="text/css">

</style>
